<template>
  <div class="root">
    <!-- 头部 -->
    <div class="login">
      <van-nav-bar title="密码重置" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 内容 -->
    <div class="content">
      <van-cell-group>
        <van-field placeholder="账号" v-model="user.username" />
        <van-field
          center
          clearable
          type="password"
          placeholder="旧密码"
          v-model="user.oldpassWord"
        >
        </van-field>
        <van-field
          center
          clearable
          type="password"
          placeholder="请输入新密码"
          v-model="user.newpassword"
        >
        </van-field>
        <van-field
          center
          clearable
          type="password"
          placeholder="请确认密码"
          v-model="user.pwd"
        >
        </van-field>
      </van-cell-group>
      <van-swipe-cell>
        <template #left>
          <van-button square type="primary" text="选择" />
        </template>
        <div class="code">
          <input type="text" placeholder="验证码" />
          <img :src="user.captcha_code" alt="" />
          <span @click="vaguefn"> <a href="#">看不清换一张?</a></span>
        </div>
      </van-swipe-cell>
    </div>
    <van-button type="primary" block round @click="confirm"
      >确认修改</van-button
    >
  </div>
</template>
<script>
import { captchas, changepasswor } from "../api/user";
export default {
  data() {
    return {
      user: {
        captcha_code: "", //验证码
        username: "", //账号
        oldpassWord: "", //旧密码
        newpasswordnewpassword: "", //新密码
        pwd: "", //确认密码
      },
    };
  },
  created() {
    captchas().then((res) => {
      console.log(res);
      this.user.captcha_code = res.data.code;
      console.log(this.user.captcha_code);
    });
  },
  methods: {
    // 跳转到登录页
    onClickLeft() {
      this.$router.push({
        path: "/login",
      });
    },

    // 确认按钮
    confirm() {
      if (this.user.username == "") {
        this.$toast.fail("账号不能为空");
        return;
      }
      if (this.user.oldpassWord == "") {
        this.$toast.fail("密码不能为空");
        return;
      }
      if (this.user.newpasswordnewpassword == "") {
        this.$toast.fail("新密码不能为空");
        return;
      }
      if (this.user.pwd == "") {
        this.$toast.fail("确认密码不能为空");
        return;
      }
      if (this.user.captcha_code == "") {
        this.$toast.fail("验证码不能为空");
        return;
      }
      // 新密码与旧密码不能一致
      if (this.user.oldpassWord === this.user.newpasswordnewpassword) {
        this.$toast.fail("新密码与旧密码不能相同");
        return;
      }
      if (this.user.newpasswordnewpassword === this.user.pwd) {
        this.$toast.fail("新密码与确认密码必须相同");
        return;
      }
      // changepasswor(this.user).then((res) => {
      //   // console.log(res);
      //   let token = localStorage.getItem("ele-68");
      //   console.log(token);
      // });
      // let user = this.user;
      // if (!this.user) {
      //   this.$toast.fail("不能输入空值");
      //   return;
      // }
      // if (this.user.account == "") {
      //   console.log(!this.user.account);
      //   this.$toast.fail("请输入账号");
      //   return;
      // }
      // if (this.user.captchas == "") {
      //   this.$toast.fail("验证码不能为空");
      //   return;
      // }
      // if (this.user.oldpwd == "") {
      //   this.$toast.fail("旧密码不能为空");
      //   return;
      // }
      // if (this.user.newpwd == "") {
      //   this.$toast.fail("新密码不能为空");
      //   return;
      // }
      // if (this.user.pwd == "") {
      //   this.$toast.fail("请输入确认的密码");
      //   return;
      // }
      // if (this.user.oldpwd == this.user.newpwd) {
      //   this.$toast.fail("新密码跟旧密码不能一样");
      //   return;
      // }
      changepasswor(this.user).then((res) => {
        this.$toast.success("修改成功");
      });
    },
    // 获取验证码
    vaguefn() {
      captchas().then((res) => {
        console.log(res);
        this.user.captcha_code = res.data.code;
        console.log(this.user.captcha_code);
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3190e8;
  margin-bottom: 20px;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__arrow {
    color: #fff;
  }
}
.code {
  display: flex;
  background-color: #fff;
  input {
    width: 80%;
    border: none;
    margin-bottom: 20px;
  }
  a {
    color: #000;
  }
}

.root {
  background-color: #f5f5f5;
}
.clon {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  input {
    border: none;
    width: 80%;
    font-size: 12px;

    a {
      color: #000;
      margin-left: 5px;
    }
  }
}
.van-button {
  margin-top: 20px;
}
</style>
